<template>
  <div class="container">
    <div>
      <a-space>
        <a-button type="primary" @click="addEntity">
          <template #icon><icon-plus-circle /></template>添加
        </a-button>
      </a-space>
    </div>
    <a-table :bordered="{cell:true}" :pagination="false" stripe :data="state.entityObj">
      <template #columns>
        <a-table-column title="贸易单号" data-index="hth"></a-table-column>
        <a-table-column title="销售订单" data-index="xsdd"></a-table-column>
        <a-table-column title="任务通知单号" data-index="tzdh"></a-table-column>
        <a-table-column title="来料方式" data-index="ycllx"></a-table-column>
        <a-table-column title="产品类型" data-index="cplx"></a-table-column>
        <a-table-column title="制单人" data-index="cjr"></a-table-column>
        <a-table-column title="日期" data-index="riqi"></a-table-column>
        <a-table-column title="状态" data-index="status"></a-table-column>
        <a-table-column title="操作" width="450">
          <template #cell="{ record }">
            <a-space>
              <a-button type="primary" size="small" @click="editEntity(record.id)"><template #icon><icon-edit /></template>修改</a-button>
              <a-button type="primary" size="small" @click="gyEntity(record.id)"><template #icon><icon-share-alt /></template>工艺路线</a-button>
              <a-button type="primary" size="small" status="success" @click="viewEntity(record.id)"><template #icon><icon-eye /></template>查看</a-button>
              <a-button type="primary" size="small" status="success" @click="jinduView(record.id)"><template #icon><icon-eye /></template>进度跟踪</a-button>
              <a-button type="primary" size="small" status="warning" @click="submitEntity(record.id)"><template #icon><icon-check /></template>下发</a-button>
              <a-button type="primary" size="small" status="danger" @click="submitEntity(record.id)"><template #icon><icon-eye /></template>完成</a-button>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>
    <a-modal title="生产任务通知单" v-model:visible="state.entityDetailVisible" :footer="false" width="1380px">
      <TasktzDetail v-if="state.entityDetailVisible" v-model="state.entityDetailVisible" :entityId="state.popupEntityId"></TasktzDetail>
    </a-modal>
    <a-drawer title="生产进度查看" v-model:visible="state.entityJinDuVisible" :footer="false" width="1380px">
      <JinDuView v-if="state.entityJinDuVisible" v-model="state.entityJinDuVisible" :entityId="state.popupEntityId"></JinDuView>
    </a-drawer>
    <a-drawer title="产品工艺" v-model:visible="state.entityGongYiVisible" :footer="false" width="1380px">
      <ProductGY v-if="state.entityGongYiVisible" v-model="state.entityGongYiVisible" :entityId="state.popupEntityId"></ProductGY>
    </a-drawer>

    <ul>
      <li>
        生成任务通知单，由销售订单转化来。由来料加工和自购原材料2种方式，还需要区分产品类型(棒材和齿轮箱锻件)
      </li>
      <li>
        销售做完生成任务通知单时，有生产补充单据，技术做工艺路线。 单据添加完成后最好能消息提醒 生产和技术 (销售添加->技术做工艺->生产补充+下发) <span style="color: #00308f">查看界面能看到3部门填写的所有信息</span>
      </li>
      <li>
        下图棒材产品，来料和自购原料的2种生产任务通知单
        <br />
        <a :href="RWTZ1PDF" target="_blank">2025贸3L号订单第30号.pdf</a>
        <br />
        <a :href="RWTZ2PDF" target="_blank">2025贸3Y号订单第31号.pdf</a>
        <br />
        <a-space>
          <img class="carousel-image" :src="RWTZ1"  alt=""/>
          <img class="carousel-image" :src="RWTZ2"  alt=""/>
        </a-space>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { Message } from '@arco-design/web-vue'
import {reactive, ref, onMounted, onUnmounted, defineAsyncComponent} from "vue";
import { useRouter } from "vue-router";
import XSDDImg from '@/assets/images/xsdd.png'
const router = useRouter();
import RWTZ1 from '@/assets/images/rwtz1.png'
import RWTZ2 from '@/assets/images/rwtz2.png'
import RWTZ1PDF from '@/assets/images/2025贸3L号订单第30号.pdf'
import RWTZ2PDF from '@/assets/images/2025贸3Y号订单第31号.pdf'
const TasktzDetail = defineAsyncComponent(() => import('@/views/product/tasktz/tasktzDetail.vue'));
const ProductGY = defineAsyncComponent(() => import('@/views/product/tasktz/productGY.vue'));
const JinDuView = defineAsyncComponent(() => import('@/views/product/tasktz/jinduView.vue'));

const state = reactive({
  entityObj: [],
  tongbuVisible : false,
  entityDetailVisible:false,
  entityGongYiVisible:false,
  entityJinDuVisible:false,
})
const loadList = ()=>{
  state.entityObj = [
    {id : 1, tzdh:'2025-BC-0001', xsdd : 'S2025030007', hth:'贸-3-2025-13005', ycllx:'来料', riqi:'2025-03-15', cjr:'朱燕燕', cplx:'棒材', status:'已添加'},
    {id : 2, tzdh:'2025-HD-0001', xsdd : 'S2025010008', hth:'贸-3-2025-13006', ycllx:'自购原料', riqi:'2025-03-12', cjr:'朱燕燕', cplx:'齿轮箱锻件', status:'已下发'},
    {id : 2, tzdh:'2025-BC-0002', xsdd : 'S2025010009', hth:'贸-3-2025-13007', ycllx:'自购原料', riqi:'2025-03-10', cjr:'朱燕燕', cplx:'棒材', status:'已完成关闭'},
  ]
}
const addEntity = ()=>{
  state.entityDetailVisible = true
}
const editEntity = (id)=>{
  state.entityDetailVisible = true
}
const viewEntity = (id) =>{
  Message.warning("参考修改界面，设计查看页面即可")
}
const submitEntity = (id)=>{
  Message.warning("功能待开发")
}
const gyEntity = (id) =>{
  state.entityGongYiVisible = true
}
const jinduView = (id)=>{
  state.entityJinDuVisible = true
}
onMounted(()=>{
  loadList();
})
onUnmounted(()=>{
})
</script>

<style scoped lang="less">
ul{
  color: #f60000; font-weight: bold;font-size: 16px;
  li{
    padding : 10px;
  }
}
</style>
